/**
 * @author truexin
 * @date   16/05/06
 */

import PullRefresh from '../components/mui/PullRefresh.js';

(function (lf, r) {
    var RC = r.createClass,
        imgUrl = lf.finger.imgUrl.yue,
        doAction = lf.bridgeJs.doAction,
        pic_list = [
            {
                img: imgUrl + 'rice.jpg',
                maskTxt: '今天我有空 ( 43个主题 )'
            }
        ],
        userName = [
            {
                img: imgUrl + 'rice.jpg',
                name: '没毛小强',
                title: '需要两男两女'
            }
        ];

    var Header = RC({
        componentDidMount: function () {

        },
        render: function () {
            var dt = this.props.picList[0];
            //console.log(dt);  //多用断点调试
            return (
                <header className="header">
                    <img src={dt.img}/>
                    <p className="bottom-mask">{dt.maskTxt}</p>
                </header>
            )
        }

    });
    var Panel = RC({
        componentDidMount: function () {

        },
        render: function () {
            return (
                <section className="panel">
                    <div className="panel-top">
                        <ul className="left">
                            <li>我们</li>
                            <li>没毛小强</li>
                            <li><i>&nbsp;25</i> 白羊座</li>
                        </ul>
                        <div className="right">
                            <h4 className="title">需要两男两女</h4>
                            <ul>
                                <li><span className="position">珠江小区2号饭堂</span> 10.86km</li>
                                <li>04/26&nbsp;&nbsp;&nbsp;&nbsp;20:00-21:00 <i>AA</i></li>
                                <li>本周五晚上2男2女饭局，吃湘菜...</li>
                            </ul>
                        </div>
                        <i className="fixed-btn">约饭<br/>05</i>
                        <span className="far-time">刚刚</span>

                    </div>
                    <ul className="comment-num">
                        <li>预览 243</li>
                        <li>报名 06</li>
                        <li>评论 26</li>
                    </ul>
                </section>
            )
        }

    });
    var Body = RC({
        getInitialState: function () {
            // return null;这里需要返回null or object
            return {};
        },
        componentDidMount: function () {

        },
        clickFn: function () {
            doAction("yue-main-detail.html", "约主题内容详情");
        },
        render: function () {
            return (
                <div className="yue-rice" >
                    <Header picList={pic_list}/>
                    <section className="panel">
                        <div className="panel-top">
                            <ul className="left">
                                <li onTouchEnd={this.clickFn}><img className="img-responsive"
                                                                   src="../public/images/yue/big3.png"/></li>
                                <li><span className="text-dot">没有腿毛的小强</span></li>
                                <li><i>&nbsp;25</i> 白羊座</li>
                            </ul>
                            <div className="right">
                                <h4 className="title">需要两男两女</h4>
                                <ul>
                                    <li><span className="position">珠江小区2号饭堂</span> 10.86km</li>
                                    <li>本周五晚：20:00-21:00 <i>AA</i></li>
                                    <li><b>川湘菜</b></li>
                                </ul>
                            </div>
                            <i className="fixed-btn">约饭<br/>05</i>
                            <span className="far-time">刚刚</span>

                        </div>
                        <ul className="comment-num">
                            <li>预览 243</li>
                            <li>报名 06</li>
                            <li>评论 26</li>
                        </ul>
                    </section>
                    <section className="panel">
                        <div className="panel-top">
                            <ul className="left">
                                <li onTouchEnd={this.clickFn}><img className="img-responsive"
                                                                   src="../public/images/yue/big1.png"/></li>
                                <li><span className="text-dot">Kimmt</span></li>
                                <li><i>&nbsp;25</i> 处女座</li>
                            </ul>
                            <div className="right">
                                <h4 className="title">纯碎饿了&nbsp;&nbsp;约个饭</h4>
                                <ul>
                                    <li><span className="position">珠江小区B栋1302房</span> 10.86km</li>
                                    <li>04/30&nbsp;&nbsp;&nbsp;&nbsp;20:00-21:00 <i>我请客</i></li>
                                    <li><b>东南亚菜</b></li>
                                </ul>
                            </div>
                            <i className="fixed-btn">约饭<br/>06</i>
                            <span className="far-time">3小时前</span>

                        </div>
                        <ul className="comment-num">
                            <li>预览 343</li>
                            <li>报名 08</li>
                            <li>评论 90</li>
                        </ul>
                    </section>
                    <section className="panel">
                        <div className="panel-top">
                            <ul className="left">
                                <li onTouchEnd={this.clickFn}><img className="img-responsive"
                                                                   src="../public/images/yue/big1.png"/></li>
                                <li><span className="text-dot">Kimmt</span></li>
                                <li><i>&nbsp;25</i> 处女座</li>
                            </ul>
                            <div className="right">
                                <h4 className="title">纯碎饿了&nbsp;&nbsp;约个饭</h4>
                                <ul>
                                    <li><span className="position">珠江小区B栋1302房</span> 10.86km</li>
                                    <li>04/30&nbsp;&nbsp;&nbsp;&nbsp;20:00-21:00 <i>我请客</i></li>
                                    <li><b>东南亚菜</b></li>
                                </ul>
                            </div>
                            <i className="fixed-btn">约饭<br/>06</i>
                            <span className="far-time">3小时前</span>

                        </div>
                        <ul className="comment-num">
                            <li>预览 343</li>
                            <li>报名 08</li>
                            <li>评论 90</li>
                        </ul>
                    </section>
                </div>
            )
        }
    });
    r.render(
        <PullRefresh data={<Body />}/>,
        //<Body />,
        document.getElementById('root'), function () {

        }
    )
})(liefeng, React)